<template>
  <a-form
      :model="formState"
      class="LoginForm"
      name="basic"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 16 }"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
  >
    <a-form-item
        label="用户名"
        name="username"
        :rules="[{ required: true, message: '请输入用户名!' }]"
    >
      <a-input placeholder="用户名" v-model:value="formState.username" />
    </a-form-item>

    <a-form-item
        label="密码"
        name="password"
        :rules="[{ required: true, message: '请输入密码!' }]"
    >
      <a-input-password placeholder="密码" v-model:value="formState.password" />
    </a-form-item>
    <a-form-item
        label="邮箱"
        name="mail"
        :rules="[{ required: true, message: '邮箱!' }]"
    >
      <a-input placeholder="请输入邮箱" v-model:value="formState.mail" />
    </a-form-item>
    <a-row>
      <a-col :flex="4">
    <a-form-item
        label="验证码"
        name="testcode"
        :rules="[{ required: true, message: '请输入验证码!' }]"
    >
      <a-input placeholder="验证码" v-model:value="formState.testcode" />
    </a-form-item>
      </a-col>
      <a-col :flex="1">
        <a-form-item>
          <a-button type="primary">获取</a-button>
        </a-form-item>
      </a-col>
    </a-row>
    <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
      <a-checkbox v-model:checked="formState.remember">记住密码</a-checkbox>
    </a-form-item>

    <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
      <a-button type="primary" html-type="submit">登录</a-button>
    </a-form-item>
  </a-form>
</template>

<script lang="ts">
//这里在使用相关的回调函数时需要先引入
import {defineComponent, reactive,ref} from 'vue';
//这里定义表单的接口
interface FormState {
  username: string;
  password: string;
  remember: boolean;
  mail:string;
  testcode:string;
}
export default defineComponent({
  name: 'lar',
  //这个是注册组件
  //入口函数
  components: {
  },
  setup() {
    //这里可以传接口
    const formState = reactive<FormState>({
      username: '',
      password: '',
      remember: true,
      mail:'',
      testcode:''
    });
    const onFinish = (values: any) => {
      console.log('Success:', values);
    };
    const onFinishFailed = (errorInfo: any) => {
      console.log('Failed:', errorInfo);
    };

    return{
      formState,
      onFinish,
      onFinishFailed,

  }
  }
});
</script>

<style scoped>
.LoginForm{
  position: absolute;
  top: 20%;
  left: 10%;
}

</style>
